<template>
  <div class="container">
    <!-- 上方按钮 -->
    <div class="handle-box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="预定方式" prop="reserveType">
          <el-radio-group v-model="ruleForm.reserveType">
            <el-radio label="1">在线预订</el-radio>
            <el-radio label="2">电话预定</el-radio>
            <el-radio label="0">其它方式</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="预定状态" prop="auditStatus">
          <el-radio-group v-model="ruleForm.auditStatus">
            <el-radio label="1">预定成功</el-radio>
            <el-radio label="0">等待确认</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="预定招聘会" prop="jobFairId">
              <el-select v-model="ruleForm.jobFairId" placeholder="请选择招聘会">
                <!-- <el-option label="招聘1" value="shanghai"></el-option>
                <el-option label="招聘456" value="beijing"></el-option> -->
                <el-option v-for="item in optionsData" :key="item.id" :label="''+item.title+''" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="展位位置">
          <!-- 展位位置 -位置选择组件 -->
          <location-selection @jobseatNum="jobseatNum" :place="ruleForm.place" :regionVal="regionVal">
          </location-selection>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="ruleForm.remark" rows="10" cols="5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="公司福利">
              <p class="job_welfare">
                <span class="welfare">增加公司标签，提升公司诱人指数 (最多可选择 8 个) </span> <span class="esitTag" @click="esitTag"><img
                    src="../../../assets/img/add_tag.png" alt=""> 修改标签</span>
              </p>
              <div class="tag-group">
                <el-tag v-for="(item,index) in allure" :key="index" effect="plain">
                  {{ item.data || item.name }}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model.trim="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系邮箱" prop="mail">
              <el-input v-model="ruleForm.mail"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="btn">
            <el-button type="primary" :loading="isloading" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 设置公司标签组件 -->
    <set-CompanyLabel ref="getListTag" :esitTagBoolean="esitTagBoolean" @close="close" @confirmHaveTag="confirmHaveTag"
      :allure="allure">
    </set-companyLabel>
  </div>
</template>

<script>
// 设置展位位置组件
import locationSelection from './components/locationSelection'

// 设置公司标签组件
import setCompanyLabel from './components/setCompanylabel'
import { acompanyLists, getListPage, eidtUpdateCompany } from '../../../api/JobFair';
import { isvalidPhone } from '@/components/common/validate'
//定义一个全局的变量
var validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!isvalidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}
export default {
  name: 'editenterprise',
  components: {
    locationSelection,
    setCompanyLabel
  },
  created () {
    this.getId()
    this.getListPage()
  },
  data () {
    return {
      // 禁止多次提交
      isloading: false,
      // 福利标签
      allure: [],
      esitTagBoolean: false,
      ruleForm: {
        // 名称
        shortName: '',
        // 预定方式
        reserveType: '',
        // 预定状态
        auditStatus: '',
        // 招聘会预定
        jobFairId: '',
        // 招聘会位置
        place: '',
        // 备注
        remark: '',
        // 公司标签组件
        allure: '',
        // 联系人
        contact: '',
        // 手机号
        phone: '',
        // 邮件
        mail: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
        reserveType: [
          { required: true, message: '请选择预定方式', trigger: 'change' },
        ],
        auditStatus: [
          { required: true, message: '请选择预定状态', trigger: 'change' },
        ],
        contact: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
        ]
      },
      optionsData: '',
      // 监听下拉框数据变化
      regionVal: ''
    };
  },
  methods: {
    submitForm (formName) {
      this.isloading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.place) {
            this.$message.error('请选择招聘会位置')
            this.isloading = false
            return false
          }
          let allureArr = []
          this.allure.map((item) => {
            allureArr.push(item.val)
          })
          this.ruleForm.allure = JSON.stringify(allureArr) // .join(',')
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.1)'
          });
          eidtUpdateCompany(this.ruleForm).then((res) => {
            if (res.success) {
              this.$router.go(-1)
              this.isloading = false
              loading.close()
            } else {
              this.$message.error(res.msg)
              loading.close()
              this.isloading = false
            }
          })
        } else {
          console.log('error submit!!');
          this.isloading = false
          return false;
        }
      });
    },
    //   取消并返回
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1)
    },
    // 添加标签
    esitTag () {
      this.$refs.getListTag.getListTag()
      this.esitTagBoolean = true
    },
    // 关闭弹框
    close (val) {
      this.esitTagBoolean = val
      this.jobSelectionBoolean = val
    },
    // 设置公司标签事件
    confirmHaveTag (valTag) {
      console.log(valTag)
      this.close(false)
      this.allure = valTag
    },
    jobseatNum (val) {
      console.log('选择位置', val)
      this.ruleForm.place = val
    },
    // 获取回显详情的数据
    getId () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let obj = {
        id: this.$route.query.id
      }
      acompanyLists(obj).then((res) => {
        if (res.success) {
          let datas = res.data.records[0]
          datas.auditStatus = String(datas.auditStatus)
          datas.reserveType = String(datas.reserveType)
          datas.jobFairId = datas.jobFairId
          let allListArr = []
          // let obj = {}
          if (datas.allList) {
            // datas.allList.map((item) => {
            //   for (let key in item) {
            //     let obj = {}
            //     obj.val = key
            //     obj.name = item[key]
            //     allListArr.push(obj)
            //     // console.log(item[key], '寻春出来的值')
            //   }
            // })
            let allureArr = []
            datas.allList.map((item) => {
              for (let key in item) {
                item[key].val = key
                allListArr.push(item[key])
                // let obj = {}
                // obj.val = key
                // obj.name = item[key]
                // allureArr.push(obj)
                // console.log(item[key], '寻春出来的值')
              }
            })
            // datas.allList.map((item) => {
            //   let obj = {}
            //   obj.bOn = true,
            //     obj.name = item
            //   allListArr.push(obj)
            // })
          }

          this.allure = allListArr
          this.ruleForm = datas
          console.log(datas, '456')
          loading.close()
        } else {
          loading.close()
          // this.$message.error(res.msg)
        }
      })
    },
    //  查询预定招聘会下拉框
    getListPage () {
      let obj = {
        title: '',
        reserveStatus: null,
        topStatus: null,
        createTime: '',
        page: 1,
        size: 1000
      }
      getListPage(obj).then((res) => {
        if (res.success) {
          let datas = res.data
          this.optionsData = datas.records
          console.log(datas, '789456123')
        } else {
          // this.$message.error(res.msg)
        }
      })
    }
  },
  watch: {
    'ruleForm.jobFairId': {
      handler (newVal) {
        this.regionVal = newVal
        console.log(this.regionVal, '456456')
      },
      deep: true
    },
    '$route.query.id': function (val, oldVal) {
      this.$nextTick(() => {
        this.getId();
      })
    }
  }
}
</script>

<style scoped>
/* 公司福利 */

.job_welfare {
    display: flex;
    align-items: center;
}
.welfare {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    margin-right: 16px;
    opacity: 1;
}
.esitTag {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #0093ff;
}
.esitTag img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
}
.tag-group .el-tag {
    margin-right: 20px;
}

.enterprise {
    margin-left: 54px;
    margin-top: 11px;
}

.btn /deep/ button {
    width: 100px;
}
</style>